<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>获取地理位置</title>
    <!-- 微信 js-sdk -->
    <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<br>
<div class="container">
    <div class="form-group">
        <label class="col-sm-2 control-label">地址：</label>
        <div class="col-sm-10" id="item-ifo">
            <input type="text" value="" class="form-control"
                   name="location.address" id="address" placeholder="正在获取地理位置" tabindex="1" autocomplete="off" />
            <div class="i-name ico" id="i-name"></div>
        </div>
    </div>
</div>

</body>
<script type="text/javascript">
    wx.config({
        debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: '${jsWechatConfig.appId}', // 必填，公众号的唯一标识
        timestamp: '${jsWechatConfig.timestamp}' , // 必填，生成签名的时间戳
        nonceStr: '${jsWechatConfig.noncestr}', // 必填，生成签名的随机串
        signature: '${jsWechatConfig.signature}',// 必填，签名，见附录1
        jsApiList: [ 'checkJsApi', 'openLocation', 'getLocation'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
    });

    wx.checkJsApi({
        jsApiList: ['getLocation'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
        success: function(res) {
            if (res.checkResult.getLocation == false) {
                alert('你的微信版本太低，不支持微信JS接口，请升级到最新的微信版本！');
                return;
            }
        }
    });
    var latitude;
    var longitude;
    var speed;
    var accuracy;
    wx.ready(function(){
        // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
        wx.getLocation({
            success : function(res) {
                latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
                longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
                speed = res.speed; // 速度，以米/每秒计
                accuracy = res.accuracy; // 位置精度
                alert(latitude);
                alert(accuracy);
            },
            cancel : function(res) {
                alert('未能获取地理位置');
            }
        });
    });

    wx.error(function(res){
        // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
        alert("验证出错");
    });
</script>

</html>